<template>
  <div class="emailVerification">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">邮箱验证</div>
    </div>

    <div class="banner">
      <img class="auto-img"
           src="../assets/ruixing_a.png"
           alt="">
    </div>

    <div class="login-box">
      <!-- 登录 -->
      <van-form>
        <van-field v-model="email"
                   name="邮箱"
                   label="邮箱"
                   autocomplete="off"
                   placeholder="请输入邮箱" />

        <van-field v-model="validCode"
                   name="验证码"
                   label="验证码"
                   autocomplete="off"
                   placeholder="请输入6位验证码">

        </van-field>
        <div class="Verification"
             @click="getEmail"
             :class="readOnly == true ? 'AtTime':''">{{text}}</div>

        <div style="margin: 16px;">
          <div class="login-item">
            <van-button round
                        block
                        color="#0C34BA"
                        @click="getCheckValidCode">下一步</van-button>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmailVerification',
  data () {
    return {
      email: '',
      validCode: '',
      text: '发送验证码',
      isSend: true,
      readOnly: false,
    };

  },

  methods: {

    getEmail () {
      this.$refs.countDown.start();
    },

    back () {
      this.$router.go(-1)
    },

    getEmail () {
      if (this.email == '') {
        this.$toast('邮箱不能为空')
        return
      }

      let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

      if (!email.test(this.email)) {
        this.$toast('请输入正确的邮箱！')
        return
      }

      if (this.isSend = true) {

        let time = 60
        let timer = setInterval(() => {
          time--
          if (time == 0) {
            clearInterval(timer);
            this.text = '重新发送'
            this.readOnly = false
            return
          } else {
            this.text = time + 's后重新发送'
            this.readOnly = true
          }


        }, 1000)
      }

      this.axios({
        method: 'post',
        url: '/emailValidCode',
        data: {
          email: this.email
        }
      }).then(result => {

        if (result.data.code == "J001") {
          this.$toast('验证码已发送！')
        }

      })

    },

    // 验证码验证
    getCheckValidCode () {

      if (this.validCode == '') {
        this.$toast('邮箱或验证码不能为空！')
        return
      }
      this.axios({
        method: 'post',
        url: '/checkValidCode',
        data: {
          validCode: this.validCode
        }
      }).then(result => {
        if (result.data.code == "K001") {

          const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: '验证码正确！',
          });

          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = `正在加载下一步请稍后...`;

            } else {
              clearInterval(timer);
              // 手动清除 Toast
              this.$toast.clear();
              this.$router.push({ name: 'BackPassword' })
            }
          }, 1000);

          return;
        }

        if (result.data.code == "K002") {
          this.$toast('请输入正确的验证码！')
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.emailVerification {
  // background-color: #2e64fe;

  .AtTime {
    pointer-events: none;
  }
  .van-count-down {
    color: #fff;
    padding: 0 15px;
  }
  .Verification {
    position: absolute;
    background-color: #0c34ba;
    color: #fff;
    padding: 10px 5px;
    top: 293px;
    right: 10px;
  }
  .van-nav-bar {
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
}
</style>